<template>
  <div class="mybox">
    <div class="userinfo">
      <img :src="userinfo.headimgurl" alt="">
      <div class="userinfo-con">
        <p>{{userinfo.nickname}}</p>
        <p style="color:#999">{{userinfo.phone}}</p>
      </div>
    </div>
    <div class="conlist">
      <ul class="optionlist">
        <li class="optionitem">
          <router-link to="/agreement">
            <span class="left-icon icon-doc"></span>
            <van-icon name="arrow" class="right-icon"></van-icon>
            <span class="button-text">用户协议</span>
          </router-link>
        </li>
        <!-- <li class="optionitem">
          <span class="left-icon icon-chat"></span>
          <van-icon name="arrow" class="right-icon"></van-icon>
          <span class="button-text">在线客服</span>
        </li> -->
        <li class="optionitem">
          <router-link to="/recommend">
            <span class="icon-qrcode"></span>
            <van-icon name="arrow" class="right-icon"></van-icon>
            <span class="button-text">二维码推荐</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    
  },
  data(){
    return {
      userinfo:{}
    }
  },
  created(){
    let userinfos = JSON.parse(sessionStorage.getItem('userinfos'))
    this.userinfo = userinfos
    if(this.userinfo){

    }else{
      this.$router.push("/login");
    }
  },
  methods:{

  }
}
</script>
<style lang="scss" scoped>
.mybox{
  text-align: left;
  .userinfo{
    font-size: 16px;
    width:calc(100% - 30px);
    height:100px;
    margin:10px auto;
    padding:15px;
    overflow:hidden;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 10px 0px rgba(152,152,152,0.2);
    border-radius:10px;
    box-sizing:border-box;
    img{
      width: 70px;
      height:70px;
      display: inline-block;
      border-radius: 100%;
      vertical-align: middle;
    }
    .userinfo-con{
      display: inline-block;
      margin-left: 28px;
      line-height:35px;
      vertical-align: middle;
      p{
        width: 200px;
        overflow:hidden;
        text-overflow:ellipsis; 
        white-space:nowrap; 
      }
    }
  }
  .conlist{
    font-size: 16px;
    position: relative;
      width:calc(100% - 30px);
      // height:142px;
      line-height:100px;
      color:#333333;
      padding:10px; 
      box-sizing: border-box;
      margin: 0 auto;
      background-color: white;
      box-shadow:0px 2px 10px 0px rgba(152,152,152,0.2);
      border-radius:10px;
    .optionlist{
      
      .optionitem{
        position: relative;
        height:40px;
        line-height:40px;
        color:#333333;
        padding:0 10px;
        border-bottom:1px #eeeeee solid;
        &:last-child{
          border: 0;
        }
        .icon-qrcode{
          background-image:url(../assets/qrcode.png);
            background-repeat:no-repeat;
            background-size: 100% 100%;
            width: 25px;
            height: 25px;
            margin-right:10px;
            display: inline-block;
            vertical-align: middle;
        }
        .right-icon{
            position: absolute;
          right:15px;
          top:50%;
          transform: translateY(-50%);
        }
        .left-icon{
          display: inline-block;
          vertical-align: middle;
          background-image:url(../assets/img.png);
          background-repeat: none;
          height:25px;
          width:25px;
          margin-right:10px;
          background-size:80px auto;
          overflow:hidden;
          background-repeat:no-repeat;
          &.icon-doc{
            background-position: -23px 0;
          }
          &.icon-chat{
             background-position: -50px 0;
          }
        }
        a{
          display: block;
          text-decoration:none; 
          color:#333; 
        }
      }
    }
  }
}
</style>